<!---->
<template>
<div class='home'>
    <h3>首页</h3>
    <h4>数据展示</h4>
    <div class="dataShow">
        <div class="list" v-for="(item,i) in datashow" :key="i">
            <div>{{item.num}}</div>
            <div>{{item.title}}</div>
        </div>
    </div>
    <div class="block">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
    <echarts></echarts>
    <div class="mack">年月日的API调用次数折线图</div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
import echarts from "@/components/echarts"
export default {
//import引入的组件需要注入对象中才能用
components:{
    echarts:echarts
},
data() {
return {
    value1: '',
    datashow:[
        {
            title:"总用户数",
            num:555
        },
        {
            title:"在线用户数",
            num:555
        },
        {
            title:"总访问量",
            num:555
        },
        {
            title:'API数量',
            num:666
        },
        {
            title:'总调用次数',
            num:888
        }
    ]
};
},
//监听属性 类似于data概念
computed: {
    
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//生命周期-挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {},//生命周期-创建之前
beforeMount() {},//生命周期-挂载之前
beforeUpdate() {},//生命周期-更新之前
updated() {},//生命周期-更新之后
beforeDestroy() {},//生命周期-销毁之前
destroyed() {},//生命周期-销毁完成
activated() {},//如果页面有keep-alive缓存功能，这个会输会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.home{
    overflow-x: auto;
    margin:20px;
    padding:0 20px;
    border-radius: 10px;
    background: #fff;
    h3,h4{
        text-align: left;
    }
    h4{
        color:rgb(64, 158, 255);
    }
    .dataShow{
        display: flex;
        align-items: center;
        .list{
            flex:1;
            margin:0 10px;
            line-height: 50px;
            border:1px solid rgb(64, 158, 255);
            border-radius: 10px;
            font-weight: bold;
        }
    }
    .block{
        text-align: left;
        margin-top:30px;
    }
    .mack{
        color:rgb(64, 158, 255);
    }
}
</style>